<template>
    <div class="page" :style="{minHeight:docHeight}">
        <el-header></el-header>
        <div class="container clearfix">
            <el-col :xs="22" :sm="22" class="reg-main">
                <form class="form-wrapper focus-effect clearfix">
                    <div class="form-group lgtl-wrapper clearfix">
                        <h2 class="reg-tl">注册成为早教合约成员</h2>
                        <router-link to="/user/login" class="normal-color rg-new-link">使用已有账号登录</router-link>
                    </div>
                    <el-col :xs="20" :sm="14" :md="11" class="reg-input-wrapper">

                        <div class="form-group clearfix pdt-10">
                            <i class="user-reg-ico input-embed-ico">
                                <icon name="user-o" scale="1.1"></icon>
                            </i>
                            <el-input class="usr-input" placeholder="手机号/邮箱"></el-input>
                        </div>

                        <div class="form-group clearfix pdt-10">
                            <i class="pwd-lock-ico input-embed-ico">
                                <icon name="lock" scale="1.2"></icon>
                            </i>
                            <el-input class="pwd-input" placeholder="密码"></el-input>
                        </div>

                        <div class="form-group clearfix pdt-10">
                            <i class="pwd-lock-ico input-embed-ico">
                                <icon name="lock" scale="1.2"></icon>
                            </i>
                            <el-input class="pwd-input" placeholder="确认密码"></el-input>
                        </div>

                        <div class="form-group clearfix pdt-10">
                            <el-col :xs="18" :sm="18">
                                <i class="pwd-lock-ico input-embed-ico">
                                    <icon name="eye" scale="1.2"></icon>
                                </i>
                                <el-input class="dark-color" placeholder="验证码"></el-input>
                            </el-col>
                            <el-col :xs="5" :sm="5" class="pull-right">
                                <el-button class="sd-code" disabled>发送验证码</el-button>
                            </el-col>
                        </div>

                        <div class="form-group clearfix">
                            <router-link to="/user/fogot" class="fg-pwd">验证码收不到?重新发送</router-link>
                        </div>

                        <div class="form-group clearfix">
                            <el-button type="primary" class="lg-btn">注册帐号</el-button>
                        </div>

                    </el-col>
                </form>
            </el-col>
        </div>
    </div>
</template>

<style lang="scss">
    @import "../scss/index.scss";
    @import "../scss/mixins/input.scss";

    div.reg-main {

        margin:0 auto;
        float:none;

        .form-wrapper{
            margin-top:40px;
            background: #fff;
            border-radius: 3px;
            border:1px solid #e5e5e5;
            padding: 20px 0;
        }

        .form-group  {
            padding-left:20px;
            padding-right:20px;
            position: relative;
        }

        .lgtl-wrapper{
            border-bottom: 1px solid #e5e5e5;
            margin-bottom:15px;


            & a{
                  text-decoration: none;
              }

            .reg-tl{
                float: left;
                font-size: 16px;
                font-weight: bolder;
                margin: 0 0 -1px;
                padding:10px 0;
                border-bottom: 3px solid $color-primary;
            }

            .rg-new-link{
                float: right;
                font-size: 12px;
                padding:12px 0;
            }
        }

        .lg-btn{
            width: 100%;
            float: left;
        }

        .fg-pwd,.fg-pwd:focus,.fg-pwd:visited{
            font-size: 12px;
            text-decoration: none;
            color: #aaa;
            float: left;
            padding: 14px 0 14px;
        }

        .el-input{
            float: left;
        }

        .el-input__inner{
            padding-left: 30px;

            @include input-placeholder{
                color:#aaa;
                font-size:13px;
                letter-spacing:0;
            }
        }

        .reg-input-wrapper{
            float: none;
            margin: 0 auto;
        }

        .sd-code{
            font-size: 12px;
            width: 100%;
            padding: 10px;
            display: block;
        }

        .sd-code:not([disabled]){
            color: $color-primary;
            border: 1px solid $color-primary;
        }
    }


</style>

<script>
import Header from 'components/Header'
import {Button, Input, Col, Row} from 'element-ui'
import Icon from 'vue-awesome/components/Icon.vue'
import 'vue-awesome/icons/user-o'
import 'vue-awesome/icons/lock'
import 'vue-awesome/icons/eye'

export default {
    components: {
        Icon,
        'el-button' : Button,
        'el-header' : Header,
        'el-input'  : Input,
        'el-col'    : Col,
        'el-row'    : Row
    }
}
</script>
